<template>
  <view>
    <view class="pageOther">
      <template
          v-for="(item,index) in hasRoleBarList"
      >
        <view
            :key="item.pagePath+index"
            v-if="getFirstShow(item.pagePath)"
            v-show="modelValue === item.pagePath"
            class="pageContent"
        >
          <slot
              :name="item.pagePath"
          ></slot>
        </view>
      </template>
    </view>
    <view class="barBottom">
      <u-tabbar
          :value="value"
          :placeholder="true"
          :border="false"
          :fixed="true"
          :safeAreaInsetBottom="true"
      >
        <u-tabbar-item
            v-for="(item, index) of hasRoleBarList"
            :key="index"
            :text="item.text"
            @click="clickTabChange(item, index)"
        >
          <image class="tab-icon"
                 v-if="item.iconPath"
                 slot="active-icon" :src="item.iconPath"></image>
          <image
              class="tab-icon"
              slot="inactive-icon"
              v-if="item.selectedIconPath"
              :src="item.selectedIconPath"
          ></image>
        </u-tabbar-item>
      </u-tabbar>
    </view>
  </view>
</template>

<script lang="ts">
import {TabBarItem} from "./types";
import {PropType} from "vue";
import typeOfUtils from "../../utils/type-of-utils";

export default {
  name: 'TabBarBottom',
  props:{
    tabBarList: {
      type: Array as PropType<TabBarItem[]>,
      default: []
    },
    modelValue: {
      type: String,
      default: ''
    },
    roles:{
      type: Array as PropType<string[]>,
      default: []
    }
  },
  emits: ['update:modelValue'],
  computed:{
    value() {
      return this.hasRoleBarList.findIndex(i=>i.pagePath === this.modelValue)
    },
    hasRoleBarList() {
      return this.tabBarList.filter(i=>{
        return i.roles.some(r=>{
          return this.roles.includes(r)
        })
      })
    }
  },
  watch: {
    hasRoleBarList: {
      handler(val: TabBarItem[]) {
        if (typeOfUtils.isNotEmpty(val)) {
          this.$emit('update:modelValue', val[0].pagePath)
        }
      },
      immediate: true
    },
    modelValue: {
      handler(val:string) {
        if(val){
          const find = this.hasRoleBarList.find(i=>i.pagePath === val)
          find.firstShow = true
        }
      },
      immediate: true
    }
  },
  methods: {
    clickTabChange(e, i) {
      if(this.modelValue === e.pagePath) {
        return
      }
      this.$emit('update:modelValue',e.pagePath)
    },
    getFirstShow(type){
      const find = this.hasRoleBarList.find(i=>i.pagePath === type)
      return find.firstShow || false
    }
  }
}
</script>

<style lang="scss" scoped>
.barBottom{
  height: 50px;
}
.pageOther{
  margin-top: var(--status-bar-height);
  height: calc(100vh - 50px - var(--status-bar-height));
  height: calc(100vh - 50px - var(--status-bar-height) - constant(safe-area-inset-bottom));
  height: calc(100vh - 50px - var(--status-bar-height) - env(safe-area-inset-bottom));
  //::v-deep{
  //  .u-popup{
  //    >*{
  //      bottom: 50px !important;
  //    }
  //  }
  //}
  .pageContent{
    height: 100%;
    margin: 0;
    padding: 0;
  }
}
</style>
